<template>
  <div class="view-container">
    <div id="baidumap" v-loading="loading"></div>
    <div class="map-cover-view">
      <el-input
        class="section search-bar"
        placeholder="输入地点检索"
        v-model="keyword"
        @keyup.native="handleSuggestion"
        @clear="handleClear"
        clearable
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
      </el-input>
      <div class="wrapper-suggestion">
        <div
          class="item"
          v-for="item in suggestionList"
          :key="item.uid"
          @click="handleClickSuggestionItem(item)"
        >
          <div class="name">
            <i class="el-icon-search"></i>
            {{item.name}}
          </div>
          <div class="city-district">{{item.city + item.district}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BMapApi from '@/api/baidumap'
import { geolocation, MarkerOverlay } from '@/utils/baidumap'
export default {
  data() {
    return {
      $map: null,
      keyword: null,
      myLocation: {},
      suggestionList: [],
      markerList: [],
      loading: false
    }
  },
  methods: {
    __initMap() {
      this.$map = new BMap.Map('baidumap')
      this.$map.enableScrollWheelZoom(true)
      this.$map.addControl(
        new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT })
      )
    },
    geolocation() {
      this.loading = true
      geolocation().then(({ address, latitude, longitude }) => {
        this.loading = false
        this.myLocation = {
          city: address.city,
          latitude,
          longitude
        }
        const point = new BMap.Point(longitude, latitude)
        const marker = new BMap.Marker(point)
        this.$map.centerAndZoom(point, 16)
        this.$map.addOverlay(marker)
      })
    },
    async handleSuggestion() {
      if (!this.keyword) {
        this.suggestionList = []
        return
      }
      const params = {
        query: this.keyword,
        region: '全国',
        city_limit: false
      }
      const {
        data: { result }
      } = await BMapApi('suggestion', params)
      this.suggestionList = result
    },
    handleClear() {
      this.$map.clearOverlays()
      this.suggestionList = []
    },
    handleClickSuggestionItem(item) {
      this.$map.clearOverlays()
      const { lat, lng } = item.location
      const point = new BMap.Point(lng, lat)
      const marker = new MarkerOverlay(
        point,
        { index: 1, name: item.name },
        this.$map,
        null
      )
      this.$map.addOverlay(marker)
      this.$map.centerAndZoom(point, 16)
    },
    handleSearch() {}
  },
  mounted() {
    this.__initMap()
    this.geolocation()
  }
}
</script>

<style lang="stylus" scoped>
.view-container
  position relative
  height 100%
#baidumap
  width 100%
  height 100%
.map-cover-view
  position absolute
  top 20px
  left 20px
  width 350px
  background-color #fff
  .section
    box-shadow 2px 2px 2px rgba(0, 0, 0, 0.1)
  .search-bar
    >>> .el-input__inner, >>> .el-input-group__append
      border-color transparent
      border-radius 0
      &:focus
        border-color transparent
.wrapper-suggestion
  font-size 13px
  .item
    display flex
    padding 10px
    cursor pointer
    &:hover
      background-color #eee
    .name
      flex 1
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
      i
        margin-right 5px
</style>
